<template>
	<view>
		<view class="search-view">
			<view class="search-input">
				<view class="icon sousuo"></view>
				<input confirm-type="search" @confirm="confirm" type="text" placeholder="输入要查询的商标类目关键词" />
			</view>
		</view>
		<view class="top">
			<scroll-view class="nav-left" scroll-y> 
				<view class="nav-left-item" @click="loadSub(k)" :key="k" :class="k==mainActive && 'active'" v-for="(v,k) in mainList">
					{{v.name}}
					<view class="num" v-if="mainNum[v.id] > 0">{{mainNum[v.id]}}</view>
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y>
				<view v-if="subList.length == 0" class="empty"><view class="icon hezi"></view><view>加载中</view></view>
				<view class="nav-right-item" v-for="(v,k) in subList" :key="k">
					<view class="nav-right-item-info" :class="subActive==k && 'active'" @click="loadLast(k)">
						<text class="icon" :class="subActive==k ? 'checked1 xiangxia' : 'checked2 xiangyou'"></text>
						{{v.name}}
					</view>
					<block v-if="subActive==k">
						<view class="nav-right-item-sub" v-for="(vv,kk) in lastList" :key="kk" @click="checkSub(kk)">
							<text class="icon jianshao1" :class="vv.checked ? 'checked2' : 'checked1'"></text>
							{{vv.name}}
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="bottom">
			<view class="left">
				<view style="line-height:40upx;color: #45b984;font-size: 30upx;">参考官费：￥{{money}}</view>
				<view style="line-height:30upx;color: #999999;font-size: 24upx;">已选择{{allNum}}个小项</view>
			</view>
			<view class="right">
				<view class="button">预览</view>
			</view>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	var trademark = []
	export default {
		data() {
			return {
				trademark :[],
				mainList : [],
				subList : [],
				lastList : [],
				checkList : [],
				mainActive : 0,
				subActive : -1,
				allNum : 0,
				mainNum : [],
				money : 0.00
			}
		},
		onLoad() {
			uni.showShareMenu()
			this.loadJson()
		},
		methods: {
			onPullDownRefresh() {
				this.loadJson()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			async loadJson(){
				trademark = uni.getStorageSync('trademark')
				if(!trademark){
					trademark = await new Promise((resolve, reject) => {
						uni.request({
							url: getApp().globalData.siteInfo.siteroot + '?i='+getApp().globalData.siteInfo.uniacid+'&c=entry&a=wxapp&m=zk_tm&do=loadJson',
							method : 'GET',
							success: res => {
								resolve(res.data)
							}
						})
					})
					uni.setStorageSync('trademark',trademark)
				}
				this.loadMain()
			},
			loadMain() {
				for (let i = 0; i < 45; i++) {
					this.mainList[i] = {id:trademark[i].id,name:trademark[i].name}
				}
				this.loadSub(0)
			},
			loadSub(k) {
				this.mainActive = k
				this.subActive = -1
				this.subActiveId = 0
				this.subList = trademark[k].sub
				this.lastList = []
			},
			loadLast(k) {
				if(this.subActive == k){
					this.subActive = -1
					this.lastList = []
				}else{
					this.subActive = k
					this.lastList = this.subList[this.subActive].sub
					for (let i = 0; i < this.lastList.length; i++) {
						this.lastList[i].checked = false
						for (let n = 0; n < this.checkList.length; n++) {
							if(this.checkList[n] && this.lastList[i].id == this.checkList[n].id){
								this.lastList[i].checked = true
							}
						}
					}
				}
			},
			checkSub(kk) {
				let checked = {
						id:this.lastList[kk].id,
						name:this.lastList[kk].name,
						sub:this.subList[this.subActive].id,
						main:this.mainList[this.mainActive].id
					}
				if(this.lastList[kk].checked){
					this.mainList[this.mainActive].num -= 1
					for (let n = 0; n < this.checkList.length; n++) {
						if(this.lastList[kk].id == this.checkList[n].id){
							this.checkList.splice(n,1)
						}
					}
				}else{
					this.mainList[this.mainActive].num += 1
					this.checkList.push(checked)
				}
				//this.$set(this.lastList[kk],'checked',!this.lastList[kk].checked)//刷新显示
				this.lastList[kk].checked = !this.lastList[kk].checked
				this.upChecked ()
			},
			upChecked (){
				this.allNum = this.checkList.length
				this.mainNum = []
				this.money = 0.00
				for (let n = 0; n < this.checkList.length; n++) {
					if(this.mainNum[this.checkList[n].main]){
						this.mainNum[this.checkList[n].main]++
					}else{
						this.mainNum[this.checkList[n].main] = 1
					}
				}
				this.mainNum.forEach(item =>{
					if(item > 0){
						this.money += Math.ceil(item/10)*300
					}
				})
			},
			async getCartList () {
				this.cartList = await this.$api('POST','postCart',{type_list:this.checkList})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
	}
	.search-view {
		background-color:#fff;
		display: flex;
		align-items: center;
		flex-direction: row;
		height: 88upx;
		padding: 0 20upx;
	}
	.search-input {
		display: flex;
		border-radius: 48upx;
		background-color: #e7e7e7;
		padding: 0 10upx;
		width:100%;
		height: 48upx;
		line-height: 48upx;
		font-size: 32upx;
	}
	.search-input .icon {
		padding: 0 10upx;
		color:#666666;
		font-size:22;
		line-height: 48upx;
	}
	.search-input input{
		width:100%;
		text-align: left;
	}
	.nav-left {
		height: calc(100vh - 100rpx - 100upx);
		width: 30%;
		overflow: hidden;
		border-right: solid 1px #E0E0E0;
	}
	.nav-left-item {
		padding-left:20upx;
		height: 80upx;
		font-size: 30upx;
		display: flex;
		align-items: center;
		border-bottom: solid 1px #E0E0E0;
		position : relative;
	}
	.nav-left-item .num {
		text-align: center;
		position : absolute;
		top: 1upx;
		right: 1upx;
		color: #fff;
		background: #ff0000;
		font-size: 20upx;
		border-radius: 15upx;
		width: 30upx;
		height: 30upx;
	}
	.nav-left .active {
		color: #ffffff;
		background-color:$uni-color-primary;
	}
	.nav-right {
		height: calc(100vh - 100rpx - 100upx);
		width: 70%;
	}
	.nav-right-item {
		color: #000000;
		text-align: left;
		font-size: 28upx;
		border-bottom: solid 1px #E0E0E0;
	}
	.nav-right-item-info{
		height: 80upx;
		display: flex;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:2;
	}
	.nav-right-item .active{
		color: #ffffff;
		background-color:$uni-color-primary;
	}
	.checked2 {
		padding:0 20upx;
		color: $uni-color-primary;
		font-size: 22upx;
	}
	.checked1 {
		padding:0 20upx;
		color: #ffffff;
		font-size: 22upx;
	}
	.nav-right-item-sub {
		display: flex;
		text-align: left;
		align-items: center;
		height: 80upx;
		font-size: 28upx;
		border-bottom: solid 1px #E0E0E0;
	}
	.nav-right-item-sub .active{
		color: #ffffff;
		background-color:$uni-color-primary;
	}
	.bottom {
		text-align: center;
		background: #fff;
		border: solid 1px #E0E0E0;
		border-bottom:none;
		display: flex;
		align-items: center;
		justify-content:space-between;
		border-radius: 20upx;
		width: 100%;
		height: 100upx;
		position : absolute;
		bottom: 100rpx;
	}
	.bottom .left{
		width: 50%;
	}
	.bottom .right{
		width: 50%;
		display: flex;
		justify-content: center;
	}
	.bottom .right .button {
		width: 80%;
		line-height: 60upx;
		color:#ffffff;
		font-size: 28upx;
		background: linear-gradient(to right, $uni-color-primary , #01814A);
		border-radius:50upx;
	}
	/* 遮罩层 */
	.mask {
	    background: rgba(0, 0, 0, 0.6);
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	    z-index: 100;
	}
	/* 弹出层 */
	.pop{
	    width: 100%;
	    position: fixed;
	    bottom: 0;
	    background: #FFF;
	    z-index: 101;
	}
	.pop .scroll{
		height: 80vh;
	}
	.pop .icon {
		font-size: 40upx;
	}
	.pop .title{
		width: 100%;
		color: $uni-color-primary;
		background: #eee;
		line-height: 60upx;
	}
	.pop .title .guanbi1{
		position : absolute;
		top : 10upx;
		right: 10upx;
		font-size: 38upx;
	}
	.pop .main {
		color: #555;
		text-align: left;
		background: #FFD39B;
	}
	.pop .sub{
		margin-left: 20upx;
		background: #FFEBCD;
	}
	.pop .last{
		background: #FFF8DC;
		margin-left: 20upx;
	}
	.pop .item{
		padding: 20upx;
		display: flex;
		justify-content:space-between;
		border-top: solid 1px #ddd;
	}
	.pop .name{
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-line-clamp:1;
		box-orient: vertical;
	}
</style>
